﻿@model CustomerServiceCenter.Models.RequestModel
@{
    Layout = null;

}

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width" />
    <title>创建请求</title>
    <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
    <link href="~/content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/content/wechat/basic.css" rel="stylesheet" />
    <link href="~/content/wechat/CreateApplication.css" rel="stylesheet" />

</head>
<body>
<header class="style-bg-green">
    <i class="fa fa-question-circle-o col-xs-10"> 创建请求</i>
</header>
<div class="container">
    <div class="tag style-bg-green"></div>
    <div class="clearfix">
        <label for="cp" class="col-xs-4">客户公司<span class="mul style-green">*</span></label>
        <input type="text" name="CompanyName" id="cp" placeholder="请输入客户公司" class="col-xs-8 checkNum" />
        <hr class="whole style-gray col-xs-10" />
    </div>

    <div class="clearfix">
        <label for="userName" class="col-xs-4">用户名<span class="mul style-green">*</span></label>
        <input type="text" name="ApplicationUserName" id="userName" placeholder="请输入用户名" class="col-xs-8 checkNum" />
        <hr class="whole style-gray col-xs-10" />
    </div>

    <div class="clearfix">
        <label for="tel" class="col-xs-4">联系电话<span class="mul style-green">*</span></label>
        <input type="text" name="Mobile" id="tel" placeholder="请输入联系电话" class="col-xs-8" />
        <hr class="whole style-gray col-xs-10" />
    </div>

    <div class="clearfix">
        <label for="email" class="col-xs-4">E-mail</label>
        <input type="text" name="Email" id="email" placeholder="请输入E-mail" class="col-xs-8" />
        <hr class="whole style-gray col-xs-10" />
    </div>

    <div class="clearfix">
        <label for="type" class="col-xs-4">问题类型<span class="mul style-green">*</span></label>
        <select id="type" name="IssueType" class="col-xs-8">
            <option value="" hidden>请选择问题类型</option>
        </select>
        <i class="fa fa-caret-down style-green"></i>
        <hr class="whole style-gray col-xs-10" />
    </div>

    <div class="clearfix">
        <label for="details" class="col-xs-4">问题描述<span class="mul style-green">*</span></label>
        <textarea id="details" name="IssueDescription" cols="30" rows="5" placeholder="请输入问题描述" class="col-xs-8"></textarea>
        <hr class="whole style-gray col-xs-10" />
    </div>

    <div class="clearfix add-img">
        <label for="" class="col-xs-4">系统截图</label>
        <input type="file" name="uploadface" accept="image/*" id="file1" class="col-xs-2 input-img opa" onchange="compress(this,'1')" />
        <i id="iImg1" class="fa fa-plus-square-o col-xs-2 add style-gray"></i>
        @*yangyao*@
        <div class="progressBar" id="progressBar1" style="margin:5% 0 0 36%;"><div id="bar1"></div></div>
        @*yangyao--*@

        <input type="file" name="uploadface" accept="image/*" id="file2" class="col-xs-2 input-img opa" onchange="compress(this,'2')" />
        <i id="iImg2" class="fa fa-plus-square-o col-xs-2 add style-gray"></i>
        @*yangyao*@
        <div class="progressBar" id="progressBar2" style="margin: 5% 0 0 57%;"><div id="bar2"></div></div>
        @*yangyao--*@
        <input type="file" name="uploadface" accept="image/*" id="file3" class="col-xs-2 input-img opa" onchange="compress(this,'3')" />
        <i id="iImg3" class="fa fa-plus-square-o col-xs-2 add style-gray"></i>
        @*yangyao*@
        <div class="progressBar" id="progressBar3" style="margin: 5% 0 0 78%;"><div id="bar3"></div></div>
        @*yangyao--*@
        <hr class="whole style-gray col-xs-10" />
    </div>

    <div class="clearfix">
        <label for="comment" class="col-xs-4">备注</label>
        <textarea id="comment" name="Comments" rows="4" class="col-xs-8"></textarea>
    </div>
</div>
<footer class="col-xs-12">
    <button class="sub col-xs-5 style-bg-blue" type="submit" id="submit" style="margin-left: 4%">提交请求</button>
    <button class="cancel col-xs-5 col-xs-offset-1 style-bg-blue" type="reset" id="cancel">取消请求</button>
</footer>
@*<div id="img_show"></div>*@
<script src="~/scripts/jquery-1.8.2.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/upload.js")"></script>
<script src="~/Scripts/compress/lrz.mobile.min.js"></script>
<script type="text/javascript">

    $(function () {
        page.$Init();

    });

    var maxInput = 15, $companyName = $("#cp"), $userName = $("#userName"), $mobile = $("#tel"), $email = $("#email"), $issueType = $("#type"), $issueDeacription = $("#details"), $comments = $("#comment"),
        isEmail = /^(\w)+(\.\w+)*@@(\w)+((\.\w{2,3}){1,3})$/,
        //isMobile = /^(1(3|4|5|7|8)\d{9})|((\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14})$/;
        isMobile = /(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/;

    var page = {
        $Init: function () {
            /*获取Issue Type*/
            page.$getIssueType();

            /*获取上一次提交ticket的部分数据*/
            page.$getLastData();

            page.$checkNowData();

            /*预览图片*/
            //picture.$preview();

            /*提交表单*/
            page.$submit();

            page.$cancel();

        },

        /*获取Issue Type*/
        $getIssueType: function () {
            var typeStr = "";
            $.ajax({
                url: "/api/WeChat/GetIssueTypeInfo",
                dataType: "json",
                success: function (info) {
                    $.each(info, function (j, item1) {
                        //$("#operator").html("<option value = " + item.ID + ">" + item.Name + "</option>");
                        typeStr += "<option value = " + item1.ID + ">" + item1.IssueTypeDescription + "</option>";
                    });
                    $issueType.append(typeStr);
                }
            });
        },

        /*获取上一次提交ticket的部分数据*/
        $getLastData: function () {
            $.ajax({
                url: "/api/WeChat/GetLastTicketDetailByEndUserID",
                dataType: "json",
                success: function (info) {
                    $companyName.val(info.CompanyName);
                    $userName.val(info.ApplicationUserName);
                    $mobile.val(info.Mobile);
                    $email.val(info.Email);
                }
            });
        },

        $cancel: function () {
            $("#cancel").click(function () {
                location.href = "../WeChat/HomePage";
            })
        },

        /*及时校验数据*/
        $checkNowData: function () {
            $companyName.blur(function () {
                $(this).removeClass("error");
                $(this).siblings("span.errorTxt").remove();
                var companyNameNum = $(this).val().length;
                if (companyNameNum == 0) {
                    $(this).addClass("error");
                } else if (companyNameNum > maxInput) {
                    console.log("companyNameNum");
                    $(this).after("<span class='col-xs-8 errorTxt'>输入不得超过15个字！</span>");
                }
            });

            $userName.blur(function () {
                $(this).removeClass("error");
                $(this).siblings("span.errorTxt").remove();
                var userNameNum = $(this).val().length;
                if (userNameNum == 0) {
                    $(this).addClass("error");
                } else if (userNameNum > maxInput) {
                    $(this).after("<span class='col-xs-8 errorTxt'>输入不得超过15个字！</span>");
                }
            });

            $mobile.blur(function () {
                $(this).removeClass("error");
                $(this).siblings("span.errorTxt").remove();
                if (!$(this).val()) {           //mobile为空
                    $(this).addClass("error");
                } else if (!isMobile.test($(this).val())) {          //mobile格式错误
                    $(this).after("<span class='col-xs-8 errorTxt'>电话格式不正确！</span>");
                }
            });

            $email.blur(function () {
                $(this).removeClass("error");
                $(this).siblings("span.errorTxt").remove();
                if ($(this).val() && !isEmail.test($(this).val())) {          //email不为空且格式错误
                    $(this).after("<span class='col-xs-8 errorTxt'>E-mail格式不正确！</span>");
                }
            });
            $issueType.focus(function () {
                $(this).siblings("span.errorTxt").remove();        //去掉issueType错误提示
            })
            $issueType.blur(function () {
                $(this).removeClass("error");
                if (!$(this).val()) {
                    $(this).after("<span class='col-xs-8 errorTxt'>问题类型不能为空！</span>");
                }
            });

            $issueDeacription.blur(function () {
                if (!$(this).val()) {           //issueDeacription为空
                    $(this).addClass("error");
                }
            });
        },

        /*提交时校验表单数据*/
        $checkSubData: function () {
            $("span.errorTxt").remove();        //去掉错误提示
            if (!$companyName.val()) {
                $companyName.addClass("error");
            }
            if (!$userName.val()) {
                $userName.addClass("error");
            }
            if (!$mobile.val()) {
                $mobile.addClass("error");
            }
            if ($mobile.val() && !isMobile.test($mobile.val())) {             //mobile不为空且格式错误
                $mobile.after("<span class='col-xs-8 errorTxt'>电话格式不正确！</span>");
            }
            if ($email.val() && !isEmail.test($email.val())) {          //email格式错误
                $email.after("<span class='col-xs-8 errorTxt'>E-mail格式不正确！</span>");
            }
            if (!$issueType.val()) {
                $issueType.after("<span class='col-xs-8 errorTxt'>问题类型不能为空！</span>");
            }
            if (!$issueDeacription.val()) {
                $issueDeacription.addClass("error");
            } else {
                return true;
            }
            return false;
        },

        /*提交表单*/
        $submit: function () {
            $("#submit").click(function () {
                //表单数据校验成功则提交
                if (page.$checkSubData()) {
                    $.ajax({
                        url: "/api/WeChat/AddTickets",
                        type: 'post',
                        dataType: "json",
                        data: {
                            'CompanyName': $companyName.val(), 'ApplicationUserName': $userName.val(), 'Mobile': $mobile.val(), 'Email': $email.val(), 'IssueType': $issueType.val(),
                            'IssueDescription': $issueDeacription.val(), 'Comments': $comments.val(),
                        },
                        success: function (data) {
                            if (data == null) {
                                location.href = "../WeChat/HomePage";
                            } else {
                                alert(data);
                            }
                        },
                        error: function (err) {
                            alert('网络故障');
                        }
                    });
                }
            });
        }
    };

    //yangyao
    function progressBar(pos) {
        var bar_div = "#bar" + pos;
        //初始化js进度条
        $(bar_div).css("width", "0px");
        //进度条的速度，越小越快
        var speed = 120, bar = bar + pos;

        bar = setInterval(function () {
            nowWidth = parseInt($(bar_div).width());
            //宽度要不能大于进度条的总宽度
            if (nowWidth <= 40) {//49
                barWidth = (nowWidth + 1) + "px";
                $(bar_div).css("width", barWidth);
            } else {
                //进度条读满后，停止
                clearInterval(bar);
            }
        }, speed);
    }
    //yangyao--


    function compress(_this, pos) {
        //yangyao
        $(_this).next().css("display", "none");
        var div_class = "#progressBar" + pos;
        $(div_class).css("display", "block");
        progressBar(pos);
        //yangyao--

        var imgID = "img" + $(_this).attr("id");
        if ($("#" + imgID).length) {        //重选图片时，去掉上一张图片
            $("#" + imgID).remove();
        };
        var formData = new FormData();
        File = $(_this)[0].files;
        oFile = $(_this)[0].files[0],
            imgSize = oFile.size;
        if (imgSize < 960 * 1280) {
            //formData.append("original", oFile);
            //uploadMob(formData, imgID);
            if (File && oFile) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $(_this).after("<img id='" + imgID + "' class='col-xs-2 imgs' src='" + e.target.result + "'/>");
                    var blob = dataURItoBlob(e.target.result);  // 上一步中的函数
                    var canvas = document.createElement('canvas');
                    var dataURL = canvas.toDataURL('image/jpeg', 1.0);
                    formData.append("file", blob, "image" + imgID + ".png");
                    //yangyao
                    uploadMob(formData, imgID, div_class);
                    //yangyao--
                }
                reader.readAsDataURL(oFile);
            }
        } else {
            //将选中图片隐藏在页面
            lrz(_this.files[0], { width: 960, quality: 1.0 }, function (rst) {
                var show_img = new Image();
                show_img.src = rst.base64;
                $(_this).after("<img id='" + imgID + "' class='col-xs-2 imgs' src='" + show_img.src + "'/>");
                _this.src = show_img.src;
                var blob = dataURItoBlob(rst.base64);  // 上一步中的函数
                var canvas = document.createElement('canvas');
                var dataURL = canvas.toDataURL('image/jpeg', 1.0);
                formData.append("file", blob, 'image.png');
                //yangyao
                uploadMob(formData, imgID, div_class);
                //yangyao--
            });
        }
    }

    function uploadMob(formData, imgID, div_class) {
        $.ajax({
            url: "/api/WeChat/SaveImageAndReturnImageName",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function (info) {
                if (info == null) {

                    //yangyao
                    $(div_class).css("display", "none");
                    //yangyao--


                    //图片上传成功时，显示图片
                    $("#" + imgID).next().addClass("opa");
                    $("#" + imgID).css("display", "block");
                } else {
                    alert(info);
                }
            },
            error: function (info) {
                alert("图片添加网络故障");
            }
        });
    }

    function dataURItoBlob(base64Data) {
        var byteString;
        if (base64Data.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(base64Data.split(',')[1]);
        else
            byteString = unescape(base64Data.split(',')[1]);
        var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        return new Blob([ia], { type: mimeString });
    }
</script>
</body>
</html>
